<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<script type="text/javascript">
    function page(n, s) {
        $("#pageNoLeft").val(n);
        $("#pageSizeLeft").val(s);
        $("#searchFormDict").submit();
        return false;
    }
    function loadSperate(id){
        loadDiv('bottomDiv','${ctx}/csm/expInfoBrowser/stockDetails?infoId='+id);
        loadDiv('rigthCenterDiv','${ctx}/csm/expInfoBrowser/dialog?expInfoId='+id);
    }
</script>
<style>
    @media (min-width: 768px) {
        .form-inline .form-control {
            display: block;
            width: 100%;
        }
    }

    .form-control {
        margin-bottom: 10px;
    }

    .title {
        line-height: 34px;
    }

    .btn-primary {
        line-height: 29px;
    }

    .panel-heading {
        background-color: #eaecf6;
    }
     #expSelect>tbody>.table-selected{
         background-color:#CAD4CF;
     }
    .table-striped > tbody > tr:nth-child(even) > td{
        background-color: transparent;
    }
</style>
<div class="app">
    <section class="layout">
        <div class="content-wrap">
            <div class="wrapper" style="bottom: 50px;">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#" onclick="loadDiv('mainCenterDiv','${ctx}/csm/expInfoBrowser/index')">消耗理信息浏览</a>
                    </li>
                </ul>
                <section class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-sm-4">
                            <section class="panel  panel-default">
                                <header class="panel-heading">检索栏</header>
                                <div class="panel-body" style="padding-left: 5px;padding-right: 5px;">
                                    <form:form id="searchFormDict" modelAttribute="expInfo"
                                               onsubmit="return loadDivForm('mainCenterDiv','searchFormDict','${ctx}/csm/expInfoBrowser/index');"
                                               method="post" class="form-inline">
                                        <input id="pageNoLeft" name="pageNo" type="hidden" value="${page.pageNo}"/>
                                        <input id="pageSizeLeft" name="pageSize" type="hidden" value="${page.pageSize}"/>
                                        <div class="col-sm-10">
                                            <div class="col-sm-4 title">消耗品类别:&nbsp;&nbsp;</div>
                                            <div class="col-sm-8">
                                                <sys:treeselect selectedParent="false" id="expCode" name="expDict.expClassID" value="${expNameDict.expType}"  update="${not empty expNameDict.id}" labelName="expType1" labelValue="${expNameDict.expType}"
                                                                title="消耗品类别" url="/csm/expClassDict/treeData" extId="${expNameDict.id}" cssClass="form-control" isnull="true" />
                                                <%--<form:select class="form-control col-sm-12"--%>
                                                             <%--path="expDict.expCode"--%>
                                                              <%--id="expCode">--%>
                                                    <%--<form:option value="" label=""></form:option>--%>
                                                    <%--<c:forEach items="${list}" var="expNameDict">--%>
                                                        <%--<form:option value="${expNameDict.expClassDict.classCode}"--%>
                                                                     <%--itemLabel="label"--%>
                                                                     <%--itemValue="value" htmlEscape="false">--%>
                                                            <%--${expNameDict.expClassDict.className}--%>
                                                        <%--</form:option>--%>
                                                    <%--</c:forEach>--%>
                                                <%--</form:select>--%>
                                            </div>
                                            <div class="col-sm-4 title" style="margin-top: 10px">消耗品名称:&nbsp;&nbsp;</div>
                                            <div class="col-sm-8">
                                                <form:input path="expDict.expName" cssStyle="margin-top: 10px" id="expName" htmlEscape="false" class="form-control"  maxlength="64" />
                                            </div>
                                        </div>
                                        <button id="btnSubmit" class="col-sm-2 btn btn-primary" type="submit">检<br>索
                                        </button>
                                    </form:form>
                                    <script>
//                                        $('#expCodeName').bind('input propertychange', function() {
//                                            if ($('#expName').val() != null || $('#expName').val() != "") {
//                                                $("#expName").val("");
//                                            }
//                                        });
//                                        $('#expName').bind('input propertychange', function() {
//                                            if ($('#expCodeName').val() != null || $('#expCodeName').val() != "") {
//                                                $("#expCodeName").val("");
//                                            }
//                                        });
                                       $('#expCodeName').click(function(){
                                           if ($('#expName').val() != null || $('#expName').val() != "") {
                                               $("#expName").val("");
                                           }
                                       })
                                       $('#expName').click(function(){
                                           if ($('#expCodeName').val() != null || $('#expCodeName').val() != "") {
                                               $("#expCodeName").val("");
                                           }
                                       })
                                    </script>
                                    <script>
                                        /*消耗品信息自动补全*/
                                        autoCompleteExp("expName");
                                        function autoCompleteExp(inputId){
                                            var url="${ctx}/csm/expInfo/autoComplete";
                                            autoComplete(inputId,url,
                                                    function(data){
                                                        var rows = [];
                                                        for(var i=0; i<data.length; i++){
                                                            rows[rows.length] = {
                                                                data:data[i],
                                                                value:data[i].id,
                                                                result:data[i].expName
                                                            };
                                                        }
                                                        return rows;
                                                    },function(data, i, max){
                                                        return data.expDict.expName;
                                                    },function(event,data,formatted){
                                                        $('#expName').val(data.expDict.expName);
                                                    });
                                        }
                                    </script>
                                    <table class="table table-bordered table-striped mg-t datatable" id="expSelect">
                                        <thead>
                                        <tr>
                                            <th>消耗品编码</th>
                                            <th>消耗品名称</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach items="${page.list}" var="expInfo">
                                            <tr style="cursor:pointer" onclick="loadSperate('${expInfo.id}');">
                                                <td>${expInfo.expDict.expCode}</td>
                                                <td>${expInfo.expDict.expName}</td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                    <div class="pagination col-sm-10" style="margin-top: 4px">${page}</div>
                                </div>
                            </section>
                        </div>
                        <div class="col-sm-8">
                            <section class="panel  panel-default">
                                <header class="panel-heading">消耗理信息</header>
                                <div class="panel-body">
                                    <div id="rigthCenterDiv" >
                                        无当前消耗理信息
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="col-sm-12">
                            <section class="panel  panel-default">
                                <header class="panel-heading">消耗品信息</header>
                                <div class="panel-body">
                                    <div id="bottomDiv"></div>
                                </div>
                            </section>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>